<template>
	<div id="">
		<div id="" style="width: 100vw;text-align: left;">
			<h3 style="margin-left: 3vw;font-size: 0.4rem;">为您推荐</h3>
		</div>
		<div id="" style="width: 100vw;display: flex;flex-direction: row;flex-wrap: wrap;text-align: left;">
			<div id="" style="width: 45vw;margin-left: 3vw;box-shadow: 2px 2px 2px 2px #f1f1f1;
		border-radius: 10px;margin-top: 1vh;" v-for="item in tui"
				@click="$router.push({path:'/details',query:{goods_id:item.goods_id}})">
				<div id="">
					<img v-lazy="url+item.original_img" style="width: 100%;height: 20vh;">
				</div>
				<div id="wen">
					{{item.goods_name}}
				</div>
				<div id="" style="color: red;font-size: 0.4rem;"><span
						style="font-size: 0.1rem;">￥</span>{{item.market_price}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters([
				'vuexTui'
			])
		},
		props: {
			tui: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				url: ''
			}
		},
		created() {
			this.$store.dispatch('user/vuexUrl', '地址')
				.then(e => {
					this.url = e
					console.log(e)
				})
		}
	}
</script>

<style>
	#wen {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 1vh;
		/* margin-left: 4vw; */
		width: 45vw;
		font-size: 0.3rem;
		text-align: left;
	}
</style>
